import React, { ChangeEvent } from 'react';
import { InlineField, Input, SecretInput, FieldSet, DataSourceHttpSettings } from '@grafana/ui';
import { DataSourcePluginOptionsEditorProps} from '@grafana/data';
import { MyDataSourceOptions, MySecureJsonData } from '../types';

interface Props extends DataSourcePluginOptionsEditorProps<MyDataSourceOptions, MySecureJsonData> {}

export function ConfigEditor(props: Props) {
  const { onOptionsChange, options } = props;
  const { jsonData, secureJsonFields, secureJsonData } = options;

  /*if (!jsonData.channel) {
    onOptionsChange({
      ...options,
      jsonData: {
        ...options.jsonData,
        channel: QueryChannel.Direct,
      },
    });
  }*/

  const onBucketChange = (event: ChangeEvent<HTMLInputElement>) => {
    onOptionsChange({
      ...options,
      jsonData: {
        ...jsonData,
        bucket: event.target.value,
      },
    });
  };

  const onEndpointChange = (event: ChangeEvent<HTMLInputElement>) => {
    onOptionsChange({
      ...options,
      jsonData: {
        ...jsonData,
        endpoint: event.target.value,
      },
    });
  };

  // Secure field (only sent to the backend)
  const onAPIKeyChange = (event: ChangeEvent<HTMLInputElement>) => {
    onOptionsChange({
      ...options,
      secureJsonData: {
        ...options.secureJsonData,
        apiKey: event.target.value,
      },
    });
  };

  const onResetAPIKey = () => {
    onOptionsChange({
      ...options,
      secureJsonFields: {
        ...options.secureJsonFields,
        apiKey: false,
      },
      secureJsonData: {
        ...options.secureJsonData,
        apiKey: '',
      },
    });
  };

  const onSecretKeyChange = (event: ChangeEvent<HTMLInputElement>) => {
    onOptionsChange({
      ...options,
      secureJsonData: {
        ...options.secureJsonData,
        secretKey: event.target.value,
      },
    });
  };

  const onResetSecretKey = () => {
    onOptionsChange({
      ...options,
      secureJsonFields: {
        ...options.secureJsonFields,
        secretKey: false,
      },
      secureJsonData: {
        ...options.secureJsonData,
        secretKey: '',
      },
    });
  };

  const onDatabaseChange = (event: ChangeEvent<HTMLInputElement>) => {
    onOptionsChange({
      ...options,
      jsonData: {
        ...jsonData,
        database: event.target.value,
      },
    });
  };

  /*const onURLChange = (event: ChangeEvent<HTMLInputElement>) => {
    onOptionsChange({
      ...options,
      jsonData: {
        ...jsonData,
        url: event.target.value,
      },
    });
  };*/

  const onUserChange = (event: ChangeEvent<HTMLInputElement>) => {
    onOptionsChange({
      ...options,
      user: event.target.value,
    });
  };

  const onPasswordChange = (event: ChangeEvent<HTMLInputElement>) => {
    onOptionsChange({
      ...options,
      secureJsonData: {
        password: event.target.value,
      },
    });
  };

  const onResetPassword = () => {
    onOptionsChange({
      ...options,
      secureJsonFields: {
        ...options.secureJsonFields,
        password: false,
      },
      secureJsonData: {
        ...options.secureJsonData,
        password: '',
      },
    });
  };

  /*const channelMap: Record<QueryChannel, SelectableValue<QueryChannel>> = {
    [QueryChannel.Direct]: {
      label: 'Direct',
      value: QueryChannel.Direct,
      description: 'Query directly by OBS.',
    },
    [QueryChannel.Influx]: {
      label: 'Influx',
      value: QueryChannel.Influx,
      description: 'Query by GeminiDB Influx',
    },
  };

  const channels: Array<SelectableValue<QueryChannel>> = [
    channelMap[QueryChannel.Direct],
    channelMap[QueryChannel.Influx],
  ];

  const onChannelChange = (selected: SelectableValue<QueryChannel>) => {
    const copy: DataSourceSettings<MyDataSourceOptions, {}> = {
      ...options,
      jsonData: {
        ...options.jsonData,
        channel: selected.value,
      },
    };

    onOptionsChange(copy);
  };*/

  return (
    <>
      {/*<FieldSet>
        <h3 className="page-heading">Query Channel</h3>
        <Field>
          <Select
            aria-label="Query Channel"
            className="width-30"
            value={channelMap[options.jsonData.channel ?? QueryChannel.Direct]}
            options={channels}
            defaultValue={channelMap[QueryChannel.Direct]}
            onChange={onChannelChange}
          />
        </Field>
      </FieldSet>*/}
      <FieldSet>
        <h3 className="page-heading">OBS Details</h3>
        <InlineField label="bucket" labelWidth={14} interactive tooltip={'bucket'}>
          <Input
            id="config-editor-bucket"
            onChange={onBucketChange}
            value={jsonData.bucket}
            placeholder="Enter the bucket, e.g. test"
            width={60}
          />
        </InlineField>
        <InlineField label="endpoint" labelWidth={14} interactive tooltip={'bucket'}>
          <Input
            id="config-editor-endpoint"
            onChange={onEndpointChange}
            value={jsonData.endpoint}
            placeholder="Enter the endpoint, e.g. https://obs.cn-south-1.myhuaweicloud.com"
            width={60}
          />
        </InlineField>
        <InlineField label="API Key" labelWidth={14} interactive tooltip={'AK'}>
          <SecretInput
            required={true}
            id="config-editor-api-key"
            isConfigured={options.secureJsonFields.apiKey}
            value={secureJsonData?.apiKey}
            placeholder="Enter the api key"
            width={60}
            onReset={onResetAPIKey}
            onChange={onAPIKeyChange}
          />
        </InlineField>
        <InlineField label="Secret Key" labelWidth={14} interactive tooltip={'SK'}>
          <SecretInput
            required
            id="config-editor-secret-key"
            isConfigured={options.secureJsonFields.secretKey}
            value={secureJsonData?.secretKey}
            placeholder="Enter the Secret key"
            width={60}
            onReset={onResetSecretKey}
            onChange={onSecretKeyChange}
          />
        </InlineField>
      </FieldSet>
      <FieldSet>
        <DataSourceHttpSettings
          showAccessOptions={false}
          dataSourceConfig={options}
          defaultUrl="http://localhost:8635"
          onChange={onOptionsChange}
          secureSocksDSProxyEnabled={false}
        />
        {/*<h3 className="page-heading">GeminiDB Influx HTTP</h3>
        <InlineField label="url" labelWidth={14} interactive tooltip={'url'}>
          <Input
              id="config-editor-bucket"
              onChange={onURLChange}
              value={jsonData.url}
              placeholder="Enter the url, e.g. http://localhost:8635"
              width={60}
          />
        </InlineField>*/}
      </FieldSet>
      <FieldSet>
        <h3 className="page-heading">GeminiDB Influx Details</h3>
        <InlineField label="database" labelWidth={14} interactive tooltip={'database'}>
          <Input
            required
            id="config-editor-bucket"
            onChange={onDatabaseChange}
            value={jsonData.database}
            placeholder="Enter the database, e.g. test"
            width={60}
          />
        </InlineField>
        <InlineField label="user" labelWidth={14} interactive tooltip={'user'}>
          <Input
            required
            id="config-editor-user"
            onChange={onUserChange}
            value={options.user}
            placeholder="Enter the database, e.g. test"
            width={60}
          />
        </InlineField>
        <InlineField label="password" labelWidth={14} interactive tooltip={'password'}>
          <SecretInput
            required
            id="config-editor-password-key"
            isConfigured={secureJsonFields.password}
            value={secureJsonData?.password}
            placeholder="Enter the Secret key"
            width={60}
            onReset={onResetPassword}
            onChange={onPasswordChange}
          />
        </InlineField>
      </FieldSet>
    </>
  );
}
